{% extends "website/base.html" %}
{% block content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">🧾</div>
      <div>
        <h1 class="h1" style="margin:0">Patients</h1>
        <div class="muted">Search and open patient charts</div>
      </div>
      <div style="margin-left:auto; display:flex; gap:8px; flex-wrap:wrap">
        <a class="btn btn-sm" href="{% url 'website:emr:staff_emr_dashboard' %}">Dashboard</a>
        <a class="btn btn-sm" href="{% url 'website:emr:staff_patient_create' %}">+ New patient</a>
      </div>
    </div>

    <form method="get" style="display:flex; gap:8px; margin-bottom:10px;">
      <input class="input" type="text" name="q" value="{{ q }}" placeholder="Search name, email, phone…" style="flex:1" />
      <button class="btn" type="submit">Search</button>
    </form>

    <div style="display:flex; flex-direction:column; gap:8px;">
      {% for p in patients %}
        <a class="row" href="{% url 'website:emr:staff_patient_detail' p.id %}">
          <div>
            <div style="font-weight:800">{{ p.full_name }}</div>
            <div class="muted">{{ p.email }}{% if p.phone %} · {{ p.phone }}{% endif %}</div>
          </div>
          <div class="pill">{{ p.created_at|date:"M d, Y" }}</div>
        </a>
      {% empty %}
        <div class="muted">No results.</div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}